export function parseViewName(deviceId, component) {
  console.log(component)
  if (component.dataBind) {
    component.dataBind.deviceId = deviceId
  }

  return component.type
}

export function parseLayerStyle(layer) {
  const styles = []
  if (layer.bgColor) {
    styles.push(`background-color: ${layer.bgColor}`)
  }
  if (layer.w > 0) {
    styles.push(`width: ${layer.w}${layer.wUnit}`)
  }
  if (layer.h > 0) {
    styles.push(`height: ${layer.h}${layer.hUnit}`)
  }
  if (layer.bgImage) {
    styles.push(`background: url(${layer.bgImage}) no-repeat center`)
    styles.push('background-size: 100% 100%')
  } else if (!layer.bgColor) {
    styles.push('background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc)')
    styles.push('linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc)')
    styles.push('background-size: 20px 20px')
    styles.push('background-position: 0 0, 10px 10px')
  }
  return styles
}

export function parseComponentStyle(component) {
  const style = {}
  style['left'] = component.style.position.x + component.style.position.xUnit
  style['top'] = component.style.position.y + component.style.position.yUnit
  style['width'] = component.style.position.w + component.style.position.wUnit
  style['height'] = component.style.position.h + component.style.position.hUnit
  style['background-color'] = component.style.bgColor
  style['z-index'] = component.style.zIndex
  style['border-radius'] = component.style.borderRadius
  style['border-width'] = component.style.borderWidth + 'px'
  style['border-style'] = component.style.borderStyle
  style['border-color'] = component.style.borderColor
  style['background'] = `url(${component.style.bgImage}) no-repeat fixed center`
  style['transform'] = component.style.transform ? `rotate(${component.style.transform}deg)` : 'rotate(0deg)'
  return style
}

export function listWidthUnit(that) {
  return [
    {
      value: 'px',
      label: that.$t('pixel')
    },
    {
      value: '%',
      label: '%'
    }
  ]
}

export function listHeightUnit(that) {
  return [
    {
      value: 'px',
      label: that.$t('pixel')
    },
    {
      value: '%',
      label: '%'
    }
  ]
}
